<template>
  <div class="dashboard-container">
    <!-- 第一栏 -->
    <div align='center' class="first-content">
      <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4"><div class="showIcon"><div class='iconScale'><i class="el-icon-s-custom"></i></div>个人用户基本信息
            <div class='data-item'>{{list.base}}</div></div></el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4"><div class="showIcon"><div class='iconScale'><i class="el-icon-s-data"></i></div>个人用户标准数据
            <div class='data-item'>{{list.data}}</div></div></el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4"><div class="showIcon"><div class='iconScale'><i class="el-icon-s-finance"></i></div>个人用户担保情况
            <div class='data-item'>{{list.colla}}</div></div></el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4"><div class="showIcon"><div class='iconScale'><i class="el-icon-s-claim"></i></div>个人用户信用情况
            <div class='data-item'>{{list.credit}}</div></div></el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4"><div class="showIcon"><div class='iconScale'><i class="el-icon-date"></i></div>个人用户资信反馈
            <div class='data-item'>{{list.feedback}}</div></div></el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4"><div class="showIcon"><div class='iconScale'><i class="el-icon-s-check"></i></div>官方银行员工信息
            <div class='data-item'>{{list.employee}}</div></div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getCount } from "@/api/sys/dashboard";

export default {
  name: "Dashboard",
  data(){
    return {
      list:{},
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created(){
    this.init();
  },
  methods: {
    init(){
      getCount().then(res=>{
        this.list = res.data;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  // &-container {
    // margin: 30px;
  // }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.first-content{
  background-color: #fdfdfd;
}
.iconScale{
  font-size: 80px;
  color: #1F2D3D;
}
.showIcon{
  width: 300px;
  height: 200px;
  align-items: center;
  margin: 20px 20px;
  border-radius: 30px;
  color: #1F2D3D;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.data-item{
  margin: 30px 20px;
  font-size: 30px;
}
.showIcon :hover{
  scale: 2;
}
</style>
